<template>
  <div style="padding-bottom: 60px">
    <img class="return" src="/public/images/commodity-return.png" @tap="goback">
    <div class="integral-header">
      <h4>我的积分</h4>
      <h2>{{data.shopRecords.pointTotal}}</h2>
    </div>
    <div class="integral-line flex-justify-center">
      <h4>本月记录</h4>
      <i class="mui-icon icon-month" @tap="getMonth()"></i>
    </div>
    <div style="position:absolute;width:100%;height:calc(100% - 170px);">
      <!--下拉刷新容器-->
      <mui-scroll-refresh top="10px">
          <div class="mui-table-view mui-table-view-chevron list-line records-box">
            <div class="no-data" v-if="!data.shopRecords.length>0" style="background:#efeef4;width:100%;height:340px;text-align:center;color:#bbb;">
              <img src="../../public/images/notips.png" style="width:160px" alt="">
              <span style="font-size:14px;">暂时没有记录</span>
            </div>
            <div @tap="$router.go({name:'orderType',params:{id:item.orderId}})" class="integral-line mui-table-view-cell flex-justify-center add" :class="{'add':item.goodsPoint >= 0,'reduce':item.goodsPoint < 0}" v-for="item in data.shopRecords">
              <div class="integrals" style="display:inline-flex;align-items:center;">
                <img class="commodity-img" :src="item.imageUrl">
                <div style="display:flex; flex-flow:column nowrap;flex-grow:1;">
                  <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:200px;color:black;margin-bottom:5px;">{{item.content}}</span>
                  <span>{{formatTime(item.createTime)}}</span>
                </div>
              </div>
              <span>
                {{item.goodsPoint}}积分
              </span>
            </div>
          </div>
      </mui-scroll-refresh>
    </div>
  </div>
</template>
<style>
  @import '../../public/css/mui.picker.min.css';
</style>
<script>
  require('../../public/images/commodity-return.png');
  require('mui.poppicker');
  require('mui.previewimage');
  require('mui.zoom');
  import store from '../we-store';
  import scrollRefresh from '../../public/components/mui-scroll-refresh/mui-scroll-refresh.vue';
  export default {
    data: function () {
      return {
        data: store.state,
        date: 0
      };
    },
    components: {
      'mui-scroll-refresh': scrollRefresh
    },
    methods: {
      goback: function () {
        window.history.go(-1);
      },
      getMonth: function () {
        var self = this;
        var dtpicker = new mui.DtPicker({
          type: 'month'
        });
        dtpicker.show(function (e) {
          self.data.shopRecords = [];
          self.data.pageNo = 1;
          self.date = e.value;
          store.getShopRecordsUP(e.value);
        });
      },
      formatTime: function (time) {
        var formatime = new Date(time);
        var year = formatime.getFullYear();
        var month = formatime.getMonth() + 1;
        month = month < 10 ? '0' + month : month;
        var day = formatime.getDate();
        day = day < 10 ? '0' + day : day;
        formatime = year + '-' + month + '-' + day;
        return formatime;
      },
      getNowYearMonth: function () {
        var now = new Date();
        var year = now.getFullYear();
        var month = now.getMonth() + 1;
        if (month < 10) {
          month = '0' + month;
        }
        var yymm = year + '-' + month;
        return yymm;
      },
      queryData: function () {
        if (this.$route.path === '/integral') {
          this.data.shopRecords = [];
          this.data.pageNo = 1;
          this.date = this.getNowYearMonth();
          store.getShopRecordsUP(this.getNowYearMonth());
        }
      }
    },
    watch: {
      $route: 'queryData'
    },
    created: function () {
      this.queryData();
    },
    events: {
      pullRefreshReady: function (scroll) {
        store.setScroll(scroll);
        // store.getAddressList();
      },
      pulldown: function () {
        store.getShopRecordsUP(this.date);
      },
      pullup: function () {
        store.getShopRecords(this.date);
      }
    },
    ready: function () {
      mui('.mui-scroll-wrapper').scroll(0, 0);
    }
  };
</script>
